<%@ page language="java" contentType="text/html;charset=UTF-8" %><%@ include file="../../inc/global.jsp" 
%><compress:html enabled="true" removeComments="false" compressJavaScript="true" yuiJsDisableOptimizations="true">
<!doctype html>
<html>
<head>
<title>${adminGlobalConfig.name}</title>
<%@include file="../head.jsp" %>
<style type="text/css">
dl {
	color:blue;
	cursor:pointer;
}
dt {margin:0px;}
dd {margin:7px; height:21px; line-height:15px;}
.input {width:90px;}
</style>
<script type="text/javascript"> 
$(document).ready(function() {
	$("#villageName").focus(); 
	$("#townId").bind('change', function(){
		var townId = $(this).find("option:selected").val();
		if(townId == -1) {
			$("#townName").show().focus();
		} else {
			$("#townName").val('');
			$("#townName").hide();
			$("#villageName").focus();
		}
	});
	$("#villageName").bind('keyup', function(){
		$("#save").removeAttr('disabled');
	});
	var saveJQID = "#save";
	$(saveJQID).bind('click', function(){
		var villageName = $("#villageName").val();
		var townName = $("#townName").val();
		// save
		var townId = $("#townId").find("option:selected").val();
		$(saveJQID).attr('disabled', 'disabled');
		$(saveJQID).val($(this).val());
		$.post('/a/ajax/village/save', 
				{townName : townName
				, townId : townId
				, villageName : villageName},
				function(data) {
					var json = $.parseJSON(data);
					if(json.succeed) {
						if(townId=='-1') {
							$("#townId option[value='-1']").each(function() {
							    $(this).remove();
							});
							$("#townId")
							.append('<option value="'+json.data.townId+'">'+townName+'</option>')
							.append('<option value="-1">新建乡镇</option>');
						}
						$("#msg").html("保存成功！！！");
					} else {
						$("#msg").html(json.msg);
					}
					getVillageDl(townId);
				})
				.error(function() {
					$("#msg").html("发生异常，保存失败！");
					$(saveJQID).removeAttr('disabled');
				});
	});
	function getVillageDl(townId) {
		$.get('/a/ajax/village/list/', function(data){
			$("#villageList").html(data);
		});
	}
	//
	function update(ele, flag) {
		var dt = $(ele);
		var id = $(ele).attr('id');
		var name = dt.html();
		if(dt.find('input').length > 0) {
			//return;
		} else {
			dt.html('<input type="text" id="'+id+'" name="'+id+'" value="'+name+'" />');
			var input = dt.find('input[type=text]');
			var t = $(input).val(); 
			$(input).val("").focus().val(t);
			$(input).bind('keydown', function(event){
				if (event.keyCode == 13) {
					var newName = $(this).val();
					$.post('/a/ajax/'+flag+'/update', 
							{id : id
								, name : newName
							},
							function(data) {
								dt.html(newName);
								$("#townId option[value='"+id+"']").each(function() {
								    $(this).text(newName);
								});
							});
				}
			});
		}
	}
	$(".villageList dt").bind('click', function() {
		update(this, 'town');
	});
	$(".villageList dd").bind('click', function() {
		//update(this, 'village');
	});
});
</script> 
</head>
<body>
<div class="wrapper">
<%@include file="../header.jsp" %>
<div class="body">
<div style="margin:21px 3px">
乡镇：
<select id="townId" name="townId">
<c:forEach var="town" items="${townList}">
<option value="${town.id}">${town.name}</option>
</c:forEach>
<option value="-1">新建乡镇</option>
</select>
<c:if test="${empty townList}">
<input type="text" id="townName" name="townName" value="" class="input" />
</c:if>
<c:if test="${!empty townList}">
<input type="text" id="townName" name="townName" value="" style="display:none" class="input" />
</c:if>
村庄：
<input type="text" id="villageName" name="villageName" value="" class="input" />
<input type="button" id="save" name="save" value="确定保存" />
&nbsp;
<span id="msg"></span>
</div>
<div>
<div class="villageList" id="villageList">
<c:forEach var="vo" items="${villageVOList}">
<dl>
<dt id="${vo.town.id}">${vo.town.name}</dt>
<c:forEach var="village" items="${vo.villageList}">
<dd id="${village.id}"><a href="/a/village/form?id=${village.id}">${village.name}<c:if test="${village.count!=null}"><span>(${village.count})</span></c:if></a>
</dd>
</c:forEach>
</dl>
</c:forEach>
</div>
</div>
<!--  -->
</div>
</div>
</body>
</html>
</compress:html>